<template>
	<view class="activity-page">
		<!-- 顶部活动封面 -->
		<view class="banner">
			<image :src="detail.cover" mode="aspectFill"></image>
		</view>

		<!-- 活动卡片 -->
		<view class="activity-card">
			<view class="free-tag">{{ detail.price || "免费" }}</view>
			<view class="info-item">
				<view class="title">{{ detail.title }}</view>
				<view class="small">{{ detail.sub_title }}</view>
			</view>
			<view class="info-item">
				<text class="label">活动时间</text>
				<text class="value">{{ detail.start_time }}</text>
			</view>

			<view class="info-item">
				<text class="label">位置信息</text>
				<text class="value">{{ detail.address }}</text>
				<!-- <view class="distance">3.2km</view> -->
			</view>

			<view class="info-item">
				<text class="label">活动费用</text>
				<text class="value">{{ detail.price || "免费" }}</text>
			</view>
		</view>

		<!-- 报名情况 -->
		<view class="signup-section">
			<view class="header">
				<view class="signup-header">
					<text>已报名：</text>
					<text class="green">{{ detail.registration.length }}人</text>
					<text>/{{ detail.registered_num }}</text>
				</view>
				<view class="array" @click="showPeople">{{ showPeopleList?"收起":"展开" }}</view>
			</view>

			<!-- <view class="gender-count">
				<text class="item">{{ detail.manCount }}</text>
				<text class="item">{{ detail.womenCount }}</text>
			</view> -->

			<view v-show="!showPeopleList" class="avatar-list">
				<image 
					v-for="todo in detail.registration" 
					:key="todo.id" 
					:src="todo.avatarUrl" 
					mode="aspectFill" class="avatar">
				</image>
				<image src="https://oss.cnyiji.cn/taiqiu/detail_peoplemore.png" mode="aspectFill" class="avatar"></image>
			</view>
			<view v-show="showPeopleList" class="people_list">
				<view 
					v-for="todo in detail.registration"
					:key="todo.id"
					class="item"
					:class="{man: todo.sex == 1, women: todo.sex == 2}"
				>
					<image :src="todo.avatarUrl" mode="aspectFill" class="people_avatar"></image>
					<view class="people_name">{{ todo.name }}</view>
				</view>
			</view>
		</view>

		<!-- 组织方 -->
		<view class="organizer-card">
			<view class="organizer_title">组织方</view>
			<view class="organizer_main">
				<view class="left">
					<image class="logo" :src="detail.admin.avatarUrl"></image>
					<view>
						<view class="org-name">{{ detail.admin.agent_name }}</view>
					<!-- 	<view class="org-desc">桌球俱乐部</view> -->
					</view>
				</view>
				<view class="right">
					<!-- <image src="/static/images/icon-wechat.png" class="icon"></image> -->
					<a :href="`tel:${detail.admin.phone}`"><image src="https://oss.cnyiji.cn/taiqiu/detail_phone.png" class="icon"></image></a>
				</view>
			</view>
		</view>

		<!-- 活动详情标题 -->
		<view class="section-title"></view>
		
		<!-- 活动详情内容 -->
		<view class="activity-detail">
			<text v-html="detail.text"></text>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<button v-if="detail.thenTime > detail.endTime" class="btn-disabled" disabled>活动已结束</button>
			<button v-if="detail.thenTime < detail.startTime" class="btn-disabled" disabled>活动未开始</button>
			<button v-if="detail.registered_num >= detail.registration_num" class="btn-outline">活动已满员</button>
			<button v-else class="btn-primary" @click="goApply">立即报名</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				id: 8,
				showPeopleList: false,
				detail: {
					registration: [],
					admin: {}
				}
			};
		},
		computed: mapState({
			activeIndex: state => state.order.activeIndex,
			tabList: state => state.order.tabList,
			param: state => state.order.param,
			list: state => state.order.list,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(optios) {
			console.error(optios.id)
			if (optios.id) {
				this.id = optios.id;
			}
		},
		onShow() {
			this.getDetail();
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			goApply() { // 前往报名
				this.$util.goUrl({
					url: `/pages/activity/registration?id=${this.id}`
				})
			},
			showPeople() { // 显示列表页
				this.showPeopleList = !this.showPeopleList;
			},
			async getDetail() {
				let res = await this.$api.activity.getDetail({
					id: this.id
				})
				console.error(res);
				res.info.price = Number(res.info.price);
				res.info.manCount = 0;
				res.info.womenCount = 0;
				res.info.registration.map(todo => {
					todo.jsonItem = JSON.parse(todo.items);
					if (todo.jsonItem[0]) todo.name = todo.jsonItem[0].value;
					if (todo.sex == 1) res.info.manCount += 1;
					else res.info.womenCount += 1;
				})
				res.info.registered_num = 0;
				res.info.group.map(todo => {
					res.info.registered_num += todo.registration_num;
				})
				res.startTime = new Date(res.start_time).getTime();
				res.endTime = new Date(res.end_time).getTime();
				res.thenTime = new Date().getTime();
				this.detail = res.info;
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
	min-height: 100vh;
}

.activity-page {
	padding-bottom: 160rpx;
}

/* 顶部封面 */
.banner image {
	width: 100%;
	height: 360rpx;
	display: block;
	border-radius: 0 0 30rpx 30rpx;
}

/* 活动卡片 */
.activity-card {
	background: #fff;
	margin: -40rpx 30rpx 30rpx;
	width: 702rpx;
	box-sizing: border-box;
	padding: 30rpx 32rpx 0;
	border-radius: 20rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.free-tag {
	position: absolute;
	top: -40rpx;
	left: 0;
	background: #fff;
	color: #74B397;
	font-weight: 700;
	padding: 6rpx 20rpx;
	border-radius: 0 0 0 20rpx;
	font-size: 40rpx;
	width: 162rpx;
	height: 63rpx;
	background: url(https://oss.cnyiji.cn/taiqiu/detail_back.png);
	background-size: 100% 100%;
}

.title {
	font-size: 32rpx;
	font-weight: 600;
	line-height: 44rpx;
	width: 100%;
	margin-bottom: 16rpx;
}

.small{
	font-size: 24rpx;
	color: #333333;
	clear: both;
	line-height: 34rpx;
}

.info-item {
	align-items: center;
	flex-wrap: wrap;
	font-size: 26rpx;
	color: #555;
	border-top: 1rpx solid #F0F0F0;
	padding: 24rpx 0;
	display: flex;
	align-items: end;
}
.info-item:nth-of-type(2){
	border: none;
}
.label {
	color: #999;
	width: 112rpx;
}
.value {
	flex: 1;
	width: 390rpx;
	color: #333;
}
.value.green {
	color: #4caf50;
	font-weight: 600;
}
.distance {
	background: linear-gradient( 270deg, #8AC5AB 0%, #8DE5B7 100%);
	color: #fff;
	padding: 4rpx 0;
	border-radius: 14rpx;
	font-size: 22rpx;
	width: 112rpx;
	height: 48rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.distance:before{
	content: "";
	display: block;
	width: 20rpx;
	height: 20rpx;
	background: url(https://oss.cnyiji.cn/taiqiu/apply_address.png);
	background-size: 100% 100%;
	margin-right: 4rpx;
}

/* 报名情况 */
.signup-section {
	background: #fff;
	margin: 0 30rpx 30rpx;
	padding: 24rpx 40rpx 24rpx 24rpx;
	border-radius: 20rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
	.header{
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		margin-bottom: 24rpx;
		.array{
			color: #ACACAC;
			display: flex;
			align-items: center;
		}
		.array:after{
			content: "";
			display: block;
			width: 20rpx;
			height: 20rpx;
			margin-left: 4rpx;
			background: url(https://oss.cnyiji.cn/taiqiu/detail_array.png);
			background-size: 100% 100%;
		}
	}
}

.signup-header {
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
}
.green {
	color: #4caf50;
}

.gender-count {
	display: flex;
	gap: 20rpx;
	color: #999;
	font-size: 24rpx;
	margin: 24rpx 0;
	.item{
		width: 76rpx;
		height: 40rpx;
		margin-right: 12rpx;
		display: flex;
		border-radius: 40rpx;
		justify-content: center;
		align-items: center;
	}
	.item:before{
		content: "";
		display: block;
		width: 24rpx;
		height: 24rpx;
	}
	.item:nth-of-type(1){
		background: #DAEDFF;
		color: #48A6FF;
	}
	.item:nth-of-type(2){
		background: #FFDEE8;
		color: #FF598A;
	}
	.item:nth-of-type(1):before, .item:nth-of-type(2):before{
		content: "";
		display: block;
		width: 24rpx;
		height: 24rpx;
		background: url(https://oss.cnyiji.cn/taiqiu/detail_man.png);
		background-size: 100% 100%;
		margin-right: 2rpx;
	}
	.item:nth-of-type(2):before{
		background: url(https://oss.cnyiji.cn/taiqiu/detail_woman.png);
		background-size: 100% 100%;
	}
}

.avatar-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	.avatar{
		width: 64rpx;
		height: 64rpx;
		border-radius: 64rpx;
	}
}
.people_list{
	.item{
		display: flex;
		height: 88rpx;
		align-items: center;
		position: relative;
		.people_avatar{
			width: 64rpx;
			height: 64rpx;
			border-radius: 64rpx;
			margin-right: 16rpx;
		}
		.people_name{
			font-size: 28rpx;
			color: #333333;
		}
	}
	// .item:after{
	// 	content: "";
	// 	width: 32rpx;
	// 	height: 32rpx;
	// 	background: url(https://oss.cnyiji.cn/taiqiu/detail_man.png);
	// 	background-size: 100% 100%;
	// 	position: absolute;
	// 	right: 24rpx;
	// 	top: 30rpx;
	// }
	// .women:after{
	// 	background: url(https://oss.cnyiji.cn/taiqiu/detail_woman.png);
	// 	background-size: 100% 100%;
	// }
}
.avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: -10rpx;
	border: 2rpx solid #fff;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

/* 主办方 */
.organizer-card {
	background: #fff;
	width: 702rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
	padding: 24rpx 24rpx 28rpx;
	.organizer_title{
		color: #333333;
		font-size: 28rpx;
		margin-bottom: 24rpx;
		font-weight: bold;
	}
	.organizer_main{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.left {
	display: flex;
	align-items: center;
}
.logo {
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	margin-right: 16rpx;
}
.org-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 4rpx;
	line-height: 40rpx;
}
.org-desc {
	font-size: 24rpx;
	color: #999;
	padding: 4rpx 16rpx;
	background: #E5FFF3;
	color: #75BE9D;
	border: 40rpx;
}
.right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}
.icon {
	width: 64rpx;
	height: 64rpx;
	margin-left: 24rpx;
}

/* 活动详情 */
.section-title {
	width: 362rpx;
	height: 99rpx;
	margin: 24rpx auto 26rpx;
	background: url(https://oss.cnyiji.cn/taiqiu/detail_title.png);
	background-size: 100% 100%;
}

.activity-detail {
	background: #fff;
	margin: 0 30rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	color: #555;
	line-height: 1.6;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
}

/* 底部按钮组 */
.bottom-btns {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20rpx 30rpx 40rpx;
	display: flex;
	justify-content: center;
	gap: 20rpx;
}
button {
	font-size: 30rpx;
	height: 88rpx;
	border-radius: 50rpx;
}
.btn-primary {
	width: 364rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: linear-gradient( 270deg, #8AC4AA 0%, #8DE6B7 100%);
	box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(139,214,177,0.4);
	border-radius: 80rpx 80rpx 80rpx 80rpx;
	color: #fff;
}
.btn-outline {
	border: 2rpx solid #4caf50;
	color: #4caf50;
	background: #fff;
}
.btn-disabled {
	background: #ddd;
	color: #999;
}
</style>
